<template>
  <div style="margin-left: 15px">
    <p class="shenqing">采购信息</p>
    <table border="1" rules="all" class="tablestyle">
      <tr>
        <td style="height: 34px;text-align: center;">申请单号</td>
        <td style="padding-left: 10px;">{{applicationData.bianhao}}</td>
        <td style="height: 34px;text-align: center;">计划单号</td>
        <td style=" padding-left: 10px;">CGJH2020000265</td>
        <td style="height: 34px;text-align: center;">申请人</td>
        <td style=" padding-left: 10px;">季明聪</td>
      </tr>
      <tr>
        <td style="height: 34px;text-align: center;">申请日期</td>
        <td style=" padding-left: 10px;">2020-05-18 13:31:05</td>
        <td style="height: 34px;text-align: center;">申请类型</td>
        <td style=" padding-left: 10px;">	设备采购</td>
        <td style="height: 34px;text-align: center;">期望供货时间</td>
        <td style=" padding-left: 10px;">2020-05-19</td>
      </tr>
      <tr>
        <td style="width: 164px;height: 34px;text-align: center;">采购标题</td>
        <td  colspan="5" style="width: 1030px;padding-left: 10px">
          设备采购test
        </td>
      </tr>
      <tr>
        <td style="width: 164px;height: 34px;text-align: center;">购置理由</td>
        <td  colspan="5" style="width: 1030px;padding-left: 10px">
          设备采购test11
        </td>
      </tr>
      <tr>
        <td style="width: 164px;height: 34px;text-align: center;">备注</td>
        <td  colspan="5" style="width: 1030px;padding-left: 10px">
          设备采购test222
        </td>
      </tr>
    </table>
    <p class="shenqing">设备清单</p>
    <el-table  :data="tableDatajihua" stripe style="margin-left: 15px;width: 1195px"
               border
    >
      <el-table-column align="center" type="index" label="序号"  width="55"  />
      <el-table-column align="center" label="名称" property="biaoti" :show-overflow-tooltip="true"  > </el-table-column>
      <el-table-column align="center" label="类别" property="cglx" :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column align="center" label="品牌"  property="cgsl" width="100" ></el-table-column>
      <el-table-column label="型号" property="jhje" align="center" width="100"> </el-table-column>
      <el-table-column align="center" label="规格" property="cjren" :show-overflow-tooltip="true" width="150" ></el-table-column>
      <el-table-column align="center" label="数量"  property="danwei"  > </el-table-column>
      <el-table-column align="center" label="供应商"  property="dqjd" :show-overflow-tooltip="true" > </el-table-column>
      <el-table-column align="center" label="单价" property="spjssj"  :show-overflow-tooltip="true" > </el-table-column>
      <el-table-column align="center" label="备注" property="spjssj"  :show-overflow-tooltip="true" > </el-table-column>
      <el-table-column align="center" label="小计" property="xiaoji"  :show-overflow-tooltip="true" ></el-table-column>
    </el-table>
    <div style="margin-left: 15px;margin-top: 15px">
      合计： 总数量：{{shuliangSum}}，总金额：{{jinesum}}
    </div>
    <div class="fujian">
      <div class="shenqing" style="display: inline-block">相关附件</div>
      <span>附件123</span>
      <span>附件123</span>
      <span>附件123</span>
    </div>
    <p class="shenqing">验收单</p>
    <el-table :data="caigouList" stripe style="width: 1195px;margin-left: 15px" border>
      <el-table-column align="center" type="index" label="序号"  width="55"  />
      <el-table-column align="center" label="单号" property="jhdh">
        <template slot-scope="scope" style="text-align: center">
          <span  >{{scope.row.jhdh}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="标题" property="cglx" :show-overflow-tooltip="true"  ></el-table-column>
      <el-table-column align="center" label="验收类别"  property="cgsl"  ></el-table-column>
      <el-table-column align="center" label="验收时间"   property="biaoti" :show-overflow-tooltip="true"  ></el-table-column>
      <el-table-column label="创建人" property="jhje" align="center" ></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top: 15px;margin-left: 15px"
      :total="40">
    </el-pagination>
  </div>
</template>

<script>
  import { listRole, getRole, delRole, addRole, updateRole, exportRole, dataScope, changeRoleStatus } from "@/api/system/role";


  export default {
    name: "Role",
    data() {
      return {
        //申请信息
        applicationData:{
          bianhao:'',
        },
        //计划信息
        tableDatajihua:[
          { index:'0',jhdh:'HC2018121300110',biaoti:'运输车',danwei:'1',cglx:'1000吨',cgsl:'2',jhje:'123',cjrq:'小米',cjren:'季明聪',beizhu:'备注测试',dqjd:'当前节点',spzt:'1',spjssj:'ceshi',xiaoji:'246'},
          { index:'1',jhdh:'HC2018121300112',biaoti:'运输车',danwei:'2',cglx:'1000吨',cgsl:'2',jhje:'123',cjrq:'小米',cjren:'季明聪',beizhu:'备注测试',dqjd:'当前节点',spzt:'1',spjssj:'ceshi',xiaoji:'246'},
          { index:'2',jhdh:'HC2018121300113',biaoti:'运输车',danwei:'1',cglx:'1000吨',cgsl:'2',jhje:'123',cjrq:'小米',cjren:'季明聪',beizhu:'备注测试',dqjd:'当前节点',spzt:'1',spjssj:'ceshi',xiaoji:'246'},
          { index:'3',jhdh:'HC2018121300114',biaoti:'运输车',danwei:'2',cglx:'1000吨',cgsl:'2',jhje:'123',cjrq:'小米',cjren:'季明聪',beizhu:'备注测试',dqjd:'当前节点',spzt:'1',spjssj:'ceshi',xiaoji:'246'},
        ],
        //验收单
        caigouList:[
          { jhdh:'CGJH2020000265',biaoti:'2020-05-18 13:31:05',cglx:'网购',cgsl:'99',jhje:'8888',cjrq:'',cjren:'季明聪',beizhu:'备注测试',dqjd:'当前节点',spzt:'1',spjssj:'2020-10-02'},
          { jhdh:'CGJH2020000264',biaoti:'2020-05-18 13:31:05',cglx:'网购',cgsl:'99',jhje:'8888',cjrq:'',cjren:'季明聪',beizhu:'备注测试',dqjd:'当前节点',spzt:'2',spjssj:'2020-10-02'},
          { jhdh:'CGJH2020000263',biaoti:'2020-05-18 13:31:05',cglx:'网购',cgsl:'99',jhje:'8888',cjrq:'',cjren:'季明聪',beizhu:'备注测试',dqjd:'当前节点',spzt:'3',spjssj:'2020-10-02'}
        ],
      };
    },
    created() {
      console.log('接收-采购申请详情',this.$route.query)
      this.applicationData.bianhao=this.$route.query.userid
      this.hejisum()
    },
    methods: {
      //合计
      hejisum:function () {
        var shuchushi=0
        var jinechushi=0
        for (var i=0;i<this.tableDatajihua.length;i++){
          shuchushi =shuchushi + (this.tableDatajihua[i].cgsl)*1
          jinechushi = jinechushi+ (this.tableDatajihua[i].xiaoji)*1

        }
        this.shuliangSum = shuchushi
        this.jinesum = jinechushi

      },
      //分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
    }
  };
</script>
<style>
  .shenqing{
    color: #05A380;
    font-weight: 700;
    margin-left: 15px;

  }
  .tablestyle {
    margin-left: 15px;
    border: 1px solid #cccccc;
    color: #606266;
    font-size: inherit;
  }
  .fujian {

    color: #787be8;
    margin-top: 15px;
  }
  .fujian span{
    margin-left: 15px;
    cursor: pointer;
  }
</style>
